<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
  "http://www.w3.org/TR/html4/strict.dtd">
<html>
  <head>
    <meta name="viewport" content="width=480; user-scalable=no" />
    <meta http-equiv="Content-type" content="text/html; charset=utf-8">
    <title>PhoneGap</title>
    <link rel="stylesheet" href="master.css" type="text/css" media="screen" title="no title" charset="utf-8">
    <script type="text/javascript" src="phonegap.js"></script>
    <script type="text/javascript">
    	function deviceInfo(){
      		document.getElementById("platform").innerHTML   = Device.platform;
      		document.getElementById("version").innerHTML    = Device.version;
      		document.getElementById("devicename").innerHTML = Device.name;
      		document.getElementById("uuid").innerHTML       = Device.uuid;
    	}
    	function getLocation() {
      		var suc = function(p){
        		alert("Your GeoLocation: " + p.coords.latitude + " " + p.coords.longitude);
      		};
      		var fail = function(error){
      			alert('There was an error retrieving geo location!');
	  		};
      		navigator.geolocation.getCurrentPosition(suc,fail);
    	}
    	function textMessage() {
      		navigator.sms.send('5556667777', 'Test message');
    	}
    	function beep() {
      		navigator.notification.beep(2);
    	}
    	function vibrate(){
      		navigator.notification.vibrate(0);
    	}
    	function exit(){
      		navigator.utility.exit();
    	}
    </script>
  </head>
  <body id="stage" class="theme" onload="deviceInfo();">
  <!--
	  <a href="javascript:addContact(true)">New Contact (GUI)</a>
	  <br />
	  <a href="javascript:addContact(false)">New Contact (API)</a>
	  <br />
	  <a href="javascript:getContacts(1,1)">Get 1st Contact (query)</a>
	  <br />
	  <a href="javascript:displayFirstContact(false)">DISPLAY 1st Contact (by recordID)</a>
	  <br />
	  <a href="javascript:displayFirstContact(true)">DISPLAY AND EDIT 1st Contact (by recordID)</a>
	  <br />
	  <a href="javascript:getContacts(5,1)">Get 1st Page of Contacts, with Page size of 5</a>
	  <br />
	  <a href="javascript:getContacts(5,2)">Get 2nd Page of Contacts, with Page size of 5</a>
	  <br />
	  <a href="javascript:getContacts(20,1)">Get All Contacts (MAXING TO 20)</a>
	  <br />
	  <a href="javascript:getContactsPrompt()">Get All Contacts (PROMPT)</a>
	  <br />
	  <a href="javascript:getContacts()">Get ALL Contacts (WARNING: may be huge)</a>
	  <br />
	  <a href="javascript:contactsCount()">Contacts Count</a>
	  <br />
	  <a href="javascript:chooseContact(true)">Choose Contact to Edit</a>
	  <br />
	  <a href="javascript:chooseContact()">Choose Contact</a>
	  <br />
	  <a href="javascript:removeContact()">Choose Contact to Remove</a>
	  <br />
	  <a href="javascript:showLoadingScreen()">Load start</a>
	  <br />
-->
      <div id="Page1">
        <h2>this file is located at /www/index.html</h2>
        <div id="info" class="Panel">
          <table>
            <tr>
              <td>
                <h4>Platform: <span id="platform">&nbsp;</span></h4>
              </td>
              <td>
                <h4>Version: <span id="version">&nbsp;</span></h4>
              </td>
            </tr>
            <tr>
              <td colspan="2">
                <h4>Device Name: <span id="devicename">&nbsp;</span></h4>
              </td>
            </tr>
            <tr>
              <td colspan="2">
                <h4>UUID:   <span id="uuid">&nbsp;</span></h4>
              </td>
            </tr>
          </table>
        </div>
        <dl id="accel-data">
          <dt>X:</dt><dd id="x">&nbsp;</dd>
          <dt>Y:</dt><dd id="y">&nbsp;</dd>
          <dt>Z:</dt><dd id="z">&nbsp;</dd>
        </dl>
        <a href="#" class="btn large" onclick="watchAccel();">Watch Accelerometer</a>
        <a href="#" class="btn large" onclick="getLocation();">Get Location</a>
        <a href="tel:411" class="btn">Call 411</a>
        <a href="#" class="btn" onclick="textMessage();">Send SMS</a>
        <a href="#" class="btn" onclick="customAlert();">Custom Alert</a>
        <a href="#" class="btn" onclick="beep();">Beep</a>
        <a href="#" class="btn" onclick="vibrate();">Vibrate</a>
        <a href="#" class="btn" onclick="exit();">Exit</a>
      </div>
      <div id="Page2" style="display: none">
        <a href="#" class="btn large" onclick="getContact();">Get Fourth Contact</a>
      </div>
  </body>
</html>
